<template>
  <div class="classes-side">
    <div class="side-teacher">
      <div class="classes-title">讲师信息</div>
      <div class="teacher-list" v-if="classesData.teachers.length > 0">
        <el-row
          type="flex"
          class="content"
          v-for="item in classesData.teachers"
          :key="item.id"
          @click.native="handleTeachers(item.user_id)"
        >
          <edu-avatar shape="circle" :src="item.avatar_url" :size="80"></edu-avatar>
          <div class="desc">
            <div class="name">{{ item.title }}</div>
            <div class="info">{{ item.signature }}</div>
          </div>
        </el-row>
      </div>
      <edu-no-data :image="false" text="还没有讲师~" v-else></edu-no-data>
    </div>
    <div class="side-student">
      <div class="classes-title">学员</div>
      <el-row :gutter="10" class="student-list" v-if="classesData.student.length > 0">
        <el-col :span="6" v-for="item in classesData.student" :key="item.id">
          <el-row type="flex" align="middle" class="item">
            <edu-avatar
              shape="circle"
              :size="60"
              :src="item.avatar_url"
              @click="goUser(item.user_id)"
            ></edu-avatar>
            <div class="title">{{ item.nick_name }}</div>
          </el-row>
        </el-col>
      </el-row>
      <edu-no-data :image="false" text="还没有学员~" v-else></edu-no-data>
    </div>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
export default {
  props: ['classesData'],
  components: {
    EduNoData
  },
  methods: {
    // 讲师
    handleTeachers(id) {
      if (this.classesData.is_agent == 1) return
      this.$router.push({
        path: '/user',
        query: {
          id
        }
      })
    },
    goUser(id) {
      if (this.classesData.is_agent == 1) return
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.classes-side {
  float: right;
  width: 366px;
  .classes-title {
    color: $text-color-import;
    font-size: 14px;
    height: 39px;
    line-height: 39px;
    padding: 0 22px;
    border-bottom: 1px solid #e4e7ed;
  }
  .side-teacher {
    background-color: #ffffff;
    .content {
      padding: 22px 20px;
      .el-avatar {
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
      }
      .desc {
        flex: 1;
        margin-left: 20px;
        padding-top: 10px;
      }
      .name {
        font-size: 14px;
        font-weight: 500;
        color: $text-color-import;
      }
      .info {
        margin-top: 10px;
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
      }
    }
  }
  .side-student {
    background-color: #ffffff;
    margin-top: 12px;
    .student-list {
      padding: 0 5px 25px;
      .item {
        flex-direction: column;
        margin-top: 20px;
        .title {
          margin-top: 10px;
          font-size: 13px;
          color: $text-color-secondary;
          max-width: 100%;
          @include ellipsis();
        }
      }
    }
  }
}
</style>
